<script lang='ts' setup>
import { reactive, ref } from 'vue' 
import GoodsImg from '/@/assets/ccflowRightNextAdmin.png'

const uploadNode = ref<HTMLElement>()
const state = reactive({
    name: '',
    tableData: [
        { id: 222, name: '阿加', src: GoodsImg },
        { id: 42, name: '阿加', src: GoodsImg },
        { id: 522, name: '阿加', src: GoodsImg },
        { id: 2642, name: '阿加', src: GoodsImg },
        { id: 322, name: '阿加', src: GoodsImg },
    ]
})

const props = withDefaults(defineProps<{ 
    modelValue: boolean, 
}>(), {
    modelValue: false
})

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}

const uploadImg = () => {
    uploadNode!.value!.click()
}
 
const pageNation = reactive({
    pageNum: 1,
    pageSize: 20,
    total: 0
})

/**
 * 分页函数
 */
const handleSizeChange = () => {}
const handleCurrentChange = () => {}

</script>

<template>
    <main>
        <el-dialog v-model="props.modelValue" title="选择销售门店" center @close="closeDialog" style="width: 1000px;">
            <section>
                <el-row justify="start" class="mb20">
                    <el-input v-model="state.name" style="width: 260px;"  placeholder="请输入门店名称" />&emsp;
                    <el-button type="primary"  >搜索</el-button> 
                </el-row>

                <section class="goods-img-list">
                    <el-table :data="state.tableData" style="width: 100%" border>
                        <el-table-column type="expend" width="50" />
                        <el-table-column label="门店ID" prop="id" />
                        <el-table-column label="门店类型" prop="userName" />
                        <el-table-column label="门店名称" prop="six" />
                        <el-table-column label="门店状态" prop="age" />   
                    </el-table>
                    

                </section>
                <el-row justify="end" class="mt20">
                    <el-button  >取消</el-button>
                    <el-button type="primary"  >确定</el-button>
                </el-row>
            </section>

            <section class="mt15">
				<el-row justify="end">
					<el-col :span="24" class="flex-end-center">
						<el-pagination
						v-model:current-page="pageNation.pageNum"
						v-model:page-size="pageNation.pageSize"
						:page-sizes="[10, 20, 30]"  
						:background="true"
						layout="total, sizes, prev, pager, next, jumper"
						:total="pageNation.total"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						/>
					</el-col>
				</el-row> 
			</section>
        </el-dialog>
    </main>
</template>

<style lang='scss' scoped>
.goods-img-list{
    display: flex;
    flex-wrap: wrap;
    .goods-img-item{
        text-align: center;
        margin-right: 20px;
        margin-bottom: 20px;
        border: 1px solid #fff;
        .goods-img-name{
            font-size: 13px;
            margin-top: 4px;
        }
       
    }
    .goods-img{
        width: 90px;
        height: 90px; 
        object-fit: cover; 
        border-radius: 6px;
        border: 2px solid #ffffff;
        cursor: pointer;
        &:hover {
            border: 2px solid #e75c5c;
        }
    }
    .active-img {
        border: 2px solid #e75c5c;
    }
}
</style>